<template>
  <div class="min-h-screen bg-gradient-to-br from-blue-50 to-purple-50 dark:from-gray-900 dark:to-gray-800 py-8 px-4">
    <div class="max-w-5xl mx-auto">
      <!-- 顶部会员信息卡片 -->
      <div class="bg-gradient-to-r from-amber-400 to-orange-500 dark:from-amber-600 dark:to-orange-600 rounded-2xl shadow-xl p-6 mb-6 text-white">
        <div class="flex flex-col sm:flex-row items-center justify-between">
          <div class="flex items-center gap-4">
            <div class="w-20 h-20 rounded-full bg-white/20 flex items-center justify-center">
              <i class="fa fa-crown text-4xl"></i>
            </div>
            <div>
              <h2 class="text-2xl font-bold">海龟汤会员</h2>
              <p class="text-white/90">享受专属特权，解锁极致体验</p>
            </div>
          </div>
          <div class="text-right mt-4 sm:mt-0">
            <div class="text-sm">到期时间</div>
            <div class="text-xl font-bold">{{ expiryDate }}</div>
            <button class="mt-2 px-4 py-1 bg-white text-orange-600 rounded-full text-sm font-medium hover:bg-gray-100 transition">续费会员</button>
          </div>
        </div>
      </div>

      <!-- 会员特权 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 mb-6">
        <h3 class="text-lg font-bold mb-4 flex items-center gap-2">
          <i class="fa fa-star text-amber-500"></i>
          会员特权
        </h3>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
          <div v-for="item in privileges" :key="item.id" class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:shadow transition">
            <div class="w-10 h-10 rounded-full bg-gradient-to-r from-amber-400 to-orange-500 flex items-center justify-center mb-3">
              <i :class="item.icon" class="text-white"></i>
            </div>
            <h4 class="font-medium mb-1">{{ item.title }}</h4>
            <p class="text-sm text-gray-600 dark:text-gray-400">{{ item.desc }}</p>
          </div>
        </div>
      </div>

      <!-- 会员专享内容 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 mb-6">
        <h3 class="text-lg font-bold mb-4 flex items-center gap-2">
          <i class="fa fa-lock text-purple-500"></i>
          会员专享内容
        </h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div class="border border-purple-200 dark:border-purple-700 bg-purple-50 dark:bg-purple-900/20 rounded-lg p-4">
            <h4 class="font-medium mb-2">独家汤面库</h4>
            <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">会员专享高难度汤面，挑战你的推理极限</p>
            <button class="text-sm px-3 py-1 bg-purple-500 text-white rounded hover:bg-purple-600 transition">立即挑战</button>
          </div>
          <div class="border border-purple-200 dark:border-purple-700 bg-purple-50 dark:bg-purple-900/20 rounded-lg p-4">
            <h4 class="font-medium mb-2">会员专属排行榜</h4>
            <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">与会员玩家一较高下，争夺专属荣誉</p>
            <button class="text-sm px-3 py-1 bg-purple-500 text-white rounded hover:bg-purple-600 transition">查看排行</button>
          </div>
        </div>
      </div>

      <!-- 会员充值 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
        <h3 class="text-lg font-bold mb-4 flex items-center gap-2">
          <i class="fa fa-credit-card text-green-500"></i>
          会员充值
        </h3>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
          <div v-for="(plan, idx) in plans" :key="idx" 
               class="border rounded-lg p-4 cursor-pointer transition"
               :class="selectedPlan === idx ? 'border-amber-500 bg-amber-50 dark:bg-amber-900/20' : 'border-gray-200 dark:border-gray-700 hover:shadow'"
               @click="selectedPlan = idx">
            <div class="text-center">
              <div class="text-2xl font-bold text-amber-600">{{ plan.duration }}</div>
              <div class="text-sm text-gray-600 dark:text-gray-400 mt-1">{{ plan.label }}</div>
              <div class="mt-3">
                <span class="text-lg font-bold">¥{{ plan.price }}</span>
                <span v-if="plan.original" class="text-sm text-gray-500 line-through ml-1">¥{{ plan.original }}</span>
              </div>
              <div v-if="plan.tag" class="text-xs text-amber-600 mt-1">{{ plan.tag }}</div>
            </div>
          </div>
        </div>
        <div class="text-center">
          <button class="px-8 py-3 bg-gradient-to-r from-amber-400 to-orange-500 text-white rounded-lg shadow-lg hover:shadow-xl transition transform hover:-translate-y-0.5" @click="handleRecharge">
            立即开通
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'


// 模拟到期时间
const expiryDate = ref('2025-12-31')

// 会员特权
const privileges = ref([
  { id: 1, icon: 'fa fa-infinity', title: '无限提示', desc: '游戏过程中不限次数使用提示' },
  { id: 2, icon: 'fa fa-trophy', title: '专属成就', desc: '解锁会员专属成就和徽章' },
  { id: 3, icon: 'fa fa-bolt', title: '优先体验', desc: '抢先体验新功能和汤面' },
  { id: 4, icon: 'fa fa-ad-free', title: '去广告', desc: '享受纯净无广告的游戏体验' },
  { id: 5, icon: 'fa fa-chart-line', title: '详细统计', desc: '查看更详细的游戏数据分析' },
  { id: 6, icon: 'fa fa-headset', title: '专属客服', desc: '7×24小时专属客服支持' }
])

// 会员套餐
const plans = ref([
  { duration: '1个月', label: '连续包月', price: 18, original: 25, tag: '热销' },
  { duration: '3个月', label: '季度会员', price: 45, original: 75, tag: '8折' },
  { duration: '12个月', label: '年度会员', price: 158, original: 300, tag: '5折超值' },
  { duration: '终身', label: '永久会员', price: 398, tag: '限时特惠' }
])

const selectedPlan = ref(0)

// 处理充值
const handleRecharge = () => {
  const plan = plans.value[selectedPlan.value]
  alert(`即将开通：${plan.duration}会员，价格：¥${plan.price}`)
  // 实际项目中这里调用支付接口
}
</script>

<style scoped>
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.float-animation {
  animation: float 6s ease-in-out infinite;
}
</style>